<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>天地图－多覆盖物显示控制</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=d3ffb63ee2dbf8114f100beb68addcd9"></script>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #mapDiv {
            height: 500px;
            width: 100%;
        }

        .controls {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f9f9f9;
        }

        .control-group {
            margin: 10px 0;
            padding: 8px;
            border: 1px solid #eee;
            border-radius: 3px;
        }

        button {
            margin: 0 5px;
            padding: 5px 10px;
            cursor: pointer;
        }

        p {
            margin: 5px 0;
            font-size: 14px;
        }

        /* 自定义信息窗口样式 */
        .custom-info-window {
            width: 500px;
            height: 350px;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
            overflow: hidden;
        }

        .info-window-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
<div id="mapDiv"></div>
<div class="controls">
    <p>三个自定义覆盖物示例：初始化显示前两个，第三个默认隐藏</p>

    <div class="control-group">
        <p>覆盖物 1 状态: <span id="overlay1-status" style="color:green">显示中</span></p>
        <button onclick="toggleOverlay('overlay1')">切换覆盖物1显示/隐藏</button>
    </div>

    <div class="control-group">
        <p>覆盖物 2 状态: <span id="overlay2-status" style="color:green">显示中</span></p>
        <button onclick="toggleOverlay('overlay2')">切换覆盖物2显示/隐藏</button>
    </div>

    <div class="control-group">
        <p>覆盖物 3 状态: <span id="overlay3-status" style="color:red">已隐藏</span></p>
        <button onclick="toggleOverlay('overlay3')">切换覆盖物3显示/隐藏</button>
        <button onclick="triggerOverlay3()">通过其他功能触发覆盖物3</button>
    </div>
</div>

<script>
    // 全局变量定义在最外层，确保所有函数可访问
    var map;
    var overlays = {};
    var zoom = 12;
    var DefinedOverlay; // 提前声明覆盖物类变量
    var currentInfoWindow = null; // 用于跟踪当前打开的信息窗口

    // 定义自定义覆盖物类（全局作用域）
    DefinedOverlay = T.Overlay.extend({
        initialize: function (id, lnglat, text, imgPath, visible, options) {
            this.id = id;
            this.lnglat = lnglat;
            this.setOptions(options);
            this._text = text;
            this._imgPath = imgPath;
            this._visible = visible;
        },

        onAdd: function (map) {
            this.map = map;
            // 创建覆盖物容器
            let imgBackground = this._div = document.createElement("div");
            imgBackground.style.position = "absolute";
            imgBackground.style.width = '48px';
            imgBackground.style.height = '35px';
            imgBackground.style.cursor = 'pointer';

            // 图片加载处理
            const img = new Image();
            img.src = this._imgPath;
            img.onload = () => {
                imgBackground.style.backgroundImage = `url("${this._imgPath}")`;
            };
            img.onerror = () => {
                imgBackground.style.backgroundColor = '#ff6b6b';
                imgBackground.style.borderRadius = '50%';
                imgBackground.style.display = this._visible ? 'block' : 'none';
            };

            // 点击事件
            imgBackground.addEventListener('click', () => {
                showInfoWindow(this.id, this.lnglat);
            });

            // 数字标签
            let showNum = this._div1 = document.createElement("div");
            showNum.style.fontSize = "14px";
            showNum.style.paddingTop = "5px";
            showNum.style.paddingLeft = "16px";
            showNum.style.color = "white";
            showNum.style.textShadow = "1px 1px 1px rgba(0,0,0,0.5)";
            showNum.appendChild(document.createTextNode(this._text));
            imgBackground.appendChild(showNum);

            // 添加到地图
            map.getPanes().overlayPane.appendChild(this._div);
            this.update(this.lnglat);

            // 初始可见性控制
            if (!this._visible) {
                this.hide();
            }
        },

        update: function () {
            if (!this.map) return;
            var pos = this.map.lngLatToLayerPoint(this.lnglat);
            this._div.style.top = (pos.y - 15) + "px";
            this._div.style.left = (pos.x - 15) + "px";
        },

        show: function() {
            if (this._div) {
                this._div.style.display = "block";
                this._visible = true;
                updateStatus(this.id);
            }
        },

        hide: function() {
            if (this._div) {
                this._div.style.display = "none";
                this._visible = false;
                updateStatus(this.id);
            }
        },

        isVisible: function() {
            return this._visible;
        }
    });

    // 页面加载完成后初始化
    window.onload = function() {
        // 初始化地图
        map = new T.Map("mapDiv");
        map.centerAndZoom(new T.LngLat(116.13800800, 39.72966000), zoom);

        // 创建覆盖物（使用天地图官方图标）
        createOverlay("overlay1", 116.13861500, 39.72984000, "1", "http://api.tianditu.gov.cn/v4.0/image/marker/marker_b.png", true);
        createOverlay("overlay2", 116.14561500, 39.73284000, "2", "http://api.tianditu.gov.cn/v4.0/image/marker/marker_b.png", true);
        createOverlay("overlay3", 116.13261500, 39.73584000, "3", "http://api.tianditu.gov.cn/v4.0/image/marker/marker_b.png", false);

        // 更新状态显示
        updateAllStatus();
    };

    // 创建覆盖物的辅助函数
    function createOverlay(id, lon, lat, text, imgPath, visible) {
        const [gcjLon, gcjLat] = precision_bd09togcj02(lon, lat);
        const point = new T.LngLat(gcjLon, gcjLat);
        overlays[id] = new DefinedOverlay(id, point, text, imgPath, visible, {});
        map.addOverLay(overlays[id]);
    }

    // 显示复杂的信息窗口（基于iframe）
    function showInfoWindow(id, point) {
        // 关闭当前可能打开的信息窗口
        if (currentInfoWindow) {
            map.closeInfoWindow(currentInfoWindow);
        }

        // 创建包含iframe的复杂内容
        const infoWindowContent = `
                <div class="custom-info-window">
                    <iframe class="info-window-iframe" id="infoFrame-${id}" src="about:blank"></iframe>
                </div>
            `;

        // 创建信息窗口
        const markerInfoWin = new T.InfoWindow(infoWindowContent, {
            maxWidth: 500,
            maxHeight: 350
        });

        // 保存当前信息窗口引用
        currentInfoWindow = markerInfoWin;

        // 打开信息窗口
        map.openInfoWindow(markerInfoWin, point);

        // 设置iframe内容（使用data URL模拟外部页面）
        const iframe = document.getElementById(`infoFrame-${id}`);
        if (iframe) {
            // 为不同的覆盖物设置不同的iframe内容
            let iframeContent = `
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="UTF-8">
                        <title>${id} 详细信息</title>
                        <style>
                            body {
                                margin: 0;
                                padding: 15px;
                                font-family: Arial, sans-serif;
                            }
                            .header {
                                color: #333;
                                border-bottom: 1px solid #eee;
                                padding-bottom: 10px;
                                margin-bottom: 15px;
                            }
                            .content p {
                                margin: 8px 0;
                            }
                            .detail-item {
                                margin-bottom: 12px;
                                padding: 8px;
                                background-color: #f9f9f9;
                                border-radius: 4px;
                            }
                            .label {
                                font-weight: bold;
                                color: #666;
                                display: inline-block;
                                width: 80px;
                            }
                            .data-section {
                                margin-top: 20px;
                                padding-top: 15px;
                                border-top: 1px dashed #ddd;
                            }
                            .stats {
                                display: flex;
                                gap: 10px;
                                margin-top: 10px;
                            }
                            .stat-box {
                                flex: 1;
                                background-color: #e3f2fd;
                                padding: 10px;
                                border-radius: 4px;
                                text-align: center;
                            }
                            .stat-value {
                                font-size: 18px;
                                font-weight: bold;
                                color: #1976d2;
                            }
                        </style>
                    </head>
                    <body>
                        <div class="header">
                            <h2>${id} 详细信息</h2>
                        </div>
                        <div class="content">
                            <div class="detail-item">
                                <span class="label">ID:</span> ${id}
                            </div>
                            <div class="detail-item">
                                <span class="label">坐标:</span> ${point.lng.toFixed(6)}, ${point.lat.toFixed(6)}
                            </div>
                            <div class="detail-item">
                                <span class="label">状态:</span> ${overlays[id].isVisible() ? '显示中' : '已隐藏'}
                            </div>

                            <div class="data-section">
                                <h3>相关数据统计</h3>
                                <div class="stats">
                                    <div class="stat-box">
                                        <div class="stat-value">128</div>
                                        <div>访问量</div>
                                    </div>
                                    <div class="stat-box">
                                        <div class="stat-value">87%</div>
                                        <div>完成率</div>
                                    </div>
                                    <div class="stat-box">
                                        <div class="stat-value">4.8</div>
                                        <div>评分</div>
                                    </div>
                                </div>
                            </div>

                            <p style="margin-top:20px;">在实际项目中，您可以将此iframe指向任何URL，实现复杂的信息展示。</p>
                        </div>
                    </body>
                    </html>
                `;

            // 使用data URL设置iframe内容，实际项目中可替换为具体页面URL
            iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(iframeContent);
        }

        // 调整地图位置以确保信息窗口完全可见
        adjustMapForInfoWindow(point, 500, 350);
    }

    // 优化的地图位置调整函数，确保信息窗口完全可见
    function adjustMapForInfoWindow(point, width, height) {
        // 获取地图容器
        const mapContainer = document.getElementById('mapDiv');
        const mapWidth = mapContainer.offsetWidth;
        const mapHeight = mapContainer.offsetHeight;

        // 将经纬度转换为容器像素坐标
        const pixel = map.lngLatToContainerPoint(point);

        // 计算信息窗口在容器中的位置范围（信息窗口显示在点的上方）
        const infoWindowLeft = pixel.x - width / 2;
        const infoWindowRight = pixel.x + width / 2;
        const infoWindowTop = pixel.y - height;
        const infoWindowBottom = pixel.y;

        // 计算需要的偏移量（正值表示向右/向下移动地图）
        let offsetX = 0;
        let offsetY = 0;

        // 检查水平方向 - 优先向右移动
        if (infoWindowLeft < 0) {
            // 左侧超出，向右移动
            offsetX = -infoWindowLeft;
        } else if (infoWindowRight > mapWidth) {
            // 右侧超出，向左移动（负值表示向左）
            offsetX = mapWidth - infoWindowRight;
        }

        // 检查垂直方向 - 优先向下移动
        if (infoWindowTop < 0) {
            // 顶部超出，向下移动
            offsetY = -infoWindowTop;
        } else if (infoWindowBottom > mapHeight) {
            // 底部超出，向上移动（负值表示向上）
            offsetY = mapHeight - infoWindowBottom;
        }

        // 如果需要调整，移动地图
        if (offsetX !== 0 || offsetY !== 0) {
            // 将像素偏移转换为经纬度偏移
            const centerPixel = map.lngLatToContainerPoint(map.getCenter());
            // 计算新的中心点像素坐标
            const newCenterPixel = new T.Point(
                centerPixel.x - offsetX,  // X轴偏移（左右）
                centerPixel.y - (offsetY * 1.3)   // Y轴偏移（上下）
            );
            const newCenter = map.containerPointToLngLat(newCenterPixel);

            // 平滑移动地图到新中心
            map.panTo(newCenter);
        }
    }

    // 切换覆盖物显示状态
    function toggleOverlay(id) {
        if (overlays[id]) {
            overlays[id].isVisible() ? overlays[id].hide() : overlays[id].show();
        }
    }

    // 更新状态显示
    function updateStatus(id) {
        const elem = document.getElementById(`${id}-status`);
        if (elem && overlays[id]) {
            elem.textContent = overlays[id].isVisible() ? "显示中" : "已隐藏";
            elem.style.color = overlays[id].isVisible() ? "green" : "red";
        }
    }

    function updateAllStatus() {
        Object.keys(overlays).forEach(id => updateStatus(id));
    }

    // 坐标转换
    function precision_bd09togcj02(bd_lon, bd_lat) {
        const x_pi = 3.1415926535897932384626433832795;
        const x = bd_lon - 0.0065;
        const y = bd_lat - 0.006;
        const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
        const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);

        return [z * Math.cos(theta), z * Math.sin(theta)];
    }

    // 触发第三个覆盖物
    function triggerOverlay3() {
        if (!overlays.overlay3) {
            return;
        }

        const shouldShow = confirm("是否显示第三个覆盖物？");
        if (shouldShow) overlays.overlay3.show();
    }
</script>
</body>
</html>
